import { StyleSheet, Platform } from 'react-native';

const height = 64;
const btnSize = Platform.OS === 'ios' ? 72 : 64;
const btnBgColor = '#4db8ff';

const shadowStyle = {
  shadowColor: '#999',
  shadowOffset: {width: 0, height: -4},
  shadowOpacity: 0.2,
  shadowRadius: 3,
}

export default StyleSheet.create({
  wrapBox: {
    flexDirection: 'row',
    height,
    alignItems: 'flex-start',
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#ddd',
    ...shadowStyle,
    shadowOffset: {width: 0, height: -2},
  },
  item: {
    flex: 1,
    height,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center'
  },
  centerBtn: {
    top: (height - btnSize) / 2,
    width: btnSize,
    height: btnSize,
    borderRadius: btnSize / 2,
    backgroundColor: btnBgColor,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: (btnSize - height) * (-1),
    ...shadowStyle
  },
  text: {
    width: btnSize,
    height: btnSize,
    textAlign: 'center'
  }
});
